import { useRef, useImperativeHandle } from 'react'
/* -------------------------------------------------------- Declare -- */
const { $lazy, $, $config  } = window
/* -------------------------------------------------------- Async Component -- */
import $time from '@utils/time'
const SearchTable = $lazy.hook(()=>import('#cpt/temp/SearchTable'))
/* -------------------------------------------------------- Page Component -- */
const Component = ({ db, url, name }, ref,) => {
	const tableRef = useRef()
	useImperativeHandle( ref, () => ({
		tableRef,
		search: option => $.ref(tableRef).tableRef().refreshClear(option)
	}))
	const config = {
		auto: 0,
		page : {
			title: { title:'集合列表', titleMode:2 },
			minWidth:null,
			controls	: [
				!$config.isNative && name != 'fs' ? null : {  mode:'del', way:'post', api:'mongodb/gridfs_file_del', param:{ db, url }, setParam: (param, { rows }) => {
					rows = rows()
					let bucket = rows[0].metadata.bucket
					let id = rows.map( v => v._id.$oid)
					return { id, bucket }
				} },
			]
		},
		// 搜索配置
		search : {
			data:[
				{ label:'id', 	name:'id' },
			]
		},
		// 表格配置
		table: {
			paging 		: 0,
			isIndex 	: 1,
			row 		: !$config.isNative && name != 'fs' ? null : {},
			cols		: [
				// { title: '桶', 					dataIndex: 'metadata', width:30, align:'center', render: t => t?.bucket},
				{ title: 'ObjectId', 			dataIndex: '_id', width:170, render: t => t.$oid },
				{ title: '文件名', 				dataIndex: 'filename', width:150, ellipsis:1},
				{ title: '文件类型', 			dataIndex: 'metadata', width:60, render: t => t?.type, align:'center' },
				{ title: '文件分类', 			dataIndex: 'metadata', width:150, render: t => t?.classify,  ellipsis:1},
				{ title: '存储块大小', 			dataIndex: 'chunkSize', width:120, align:'center', render: t => {
					if( t ){
						return (t/1024).toFixed(2)  + 'KB' + ' / ' + (t/1048576).toFixed(2) + 'MB'
					}
				}},
				{ title: '文档大小', 			dataIndex: 'length', width:120, align:'center', render: t => {
					if( t ){
						return (t/1024).toFixed(2)  + 'KB' + ' / ' + (t/1048576).toFixed(2) + 'MB'
					}
				}},
				{ title: '上传时间', 			dataIndex: 'uploadDate', width:120, align:'center', render: t => {
					if( t ){
						return $time.format(t.$date.$numberLong*1, { t:'full' })
					}
				}},
			],
			controls 	: {
				width:160,
				data: ({ _id,  metadata:{ bucket, temp, type }  }) => [
					!$config.isNative && !temp ? null : { mode:'delPop', label:'删除', abs:0, rc:1, way:'post',
						param:{ id:_id.$oid, bucket: temp ? 'fs' : bucket, db, url:decodeURIComponent(url) }, 
						api:'mongodb/gridfs_file_del'
						// onOk:()=>{
						// 	$.ref(tableRef).tableRef().refreshClear({ api:'db/mongodb/gridfs/list/' + (temp ? 'fs' : bucket) })
						// } 
					},
					// { label:'查看文件', click:() => {
					// 	window.$http.pull(null, 'mongodb/mg_look_by_id_bucket_type' , { param:{ id:_id.$oid, bucket:temp ? 'fs' : bucket, type, db, url }, loading:true }).then(data=>{
					// 		if(['png','jpg'].includes(type)){
					// 			window.$imageModalRef().open({
					// 				title 		: '图片预览',
					// 				width 		: '50%',
					// 				url 		: data
					// 			})
					// 		}else{
					// 			window.open(data)
					// 		}
					// 	})
					// } },
					{ label:'查看文件', mode:'mg_file', api:'mongodb/mg_look', param:{ id:_id.$oid, bucket:temp ? 'fs' : bucket, type, db, url }, name:'file' },
					// { label:'查看文件', click:() => {
					// 	window.$http.pull(null, ($fn.local('url') || '') + 'db/mongodb/gridfs_file_find' , { param:{ id:_id.$oid, bucket:temp ? 'fs' : bucket }, loading:true })
					// } },
				]
			},
		}
	}
	return <SearchTable ref={tableRef} {...config}/>
}
export default Component